<template>
  <div>
    <el-form @submit.native.prevent ref="editForm" :model="formFileds">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item>
            <el-input
              v-model="text"
              prefix-icon="el-icon-search"
              placeholder="业务编号 / 收款状态 / 付款方 / 业务类型/ 品牌型号/ 车牌号"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="search()"> 搜索 </el-button>
            <el-button type="primary" @click="download()"> 导出 </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--表格内容  tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)-->
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      @sort-change="onSortChange"
    >
      <el-table-column
        prop="ywbh"
        label="业务编号"
        fixed
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
      <el-table-column prop="skzt" label="收款状态"></el-table-column>
      <el-table-column prop="cph" label="车牌号"></el-table-column>
      <el-table-column prop="fkf" label="付款方"></el-table-column>
      <el-table-column
        prop="ysje"
        label="应收金额"
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
      <el-table-column
        prop="ssje"
        label="实收金额"
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
      <el-table-column prop="kpzt" label="开票状态"></el-table-column>
      <el-table-column
        prop="fpbh"
        label="发票编号"
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
      <el-table-column prop="djr" label="对接人"></el-table-column>
      <el-table-column prop="pgs" label="评估师"></el-table-column>
      <el-table-column prop="shy" label="审核员"></el-table-column>
      <el-table-column prop="ywlx" label="业务类型"></el-table-column>
      <el-table-column prop="ppxh" label="品牌型号"></el-table-column>
      <el-table-column prop="wtf" label="委托方"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column
        prop="createTime"
        label="开始时间"
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
      <el-table-column
        prop="startTime"
        label="收定金时间"
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
      <el-table-column
        prop="endTime"
        label="结清全款时间"
        sortable="custom"
        :sort-orders="['ascending', 'descending']"
      ></el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      :page-sizes="[5, 10, 20, 50, 100]"
      :page-size="size"
      :current-page="current"
      :total="total"
      @current-change="currentChange"
      @size-change="sizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>
     
<script type="text/javascript">
import { selectAll, find, sort, ipage } from "@/api/evaluation/financeList";
import { correlationId } from "@/api/systemManage/enterpriseMaage";
export default {
  name: "Table",
  data() {
    return {
      text: "",
      sortType: 0,
      pprop: "ywbh",
      formFileds: {},
      tableData: [],
      size: 10,
      current: 1,
      total: 0,
    };
  },
  methods: {
    download() {
      window.location.href = "api/cwlist/export?input=" + this.text;
    },
    search() {
      this.getList();
      //find("input=" + this.text).then((res) => {
      //  console.log(this.text);
      //  //this.tableData = res.data;
      //  let data = JSON.parse(JSON.stringify(res.data));
      //  this.tableData = data.splice((this.page - 1) * this.size, this.size);
      //  this.total = res.data.length;
      //});
    },
    getList() {
      var par;
      par = {
        order: 0,
        size: this.size,
        current: this.current,
        order: this.sortType,
        prop: this.pprop,
        qyid: Number(localStorage.getItem("companyId")),
      };
      if (this.text) {
        par.input = this.text;
      }
      //console.log("当前用户的企业id是：" + localStorage.getItem("companyId"));
      ipage(par).then((res) => {
        if (res) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
        /* this.tableData = res.data; */
      });
    },
    //获取表格数据，自行分页（splice）
    getTabelData2() {
      selectAll().then((res) => {
        let data = JSON.parse(JSON.stringify(res.data));
        this.tableData = data.splice((this.page - 1) * this.size, this.size);
        this.total = res.data.length;
      });
    },
    //page改变时的回调函数，参数为当前页码
    currentChange(val) {
      console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData2();
      this.onSortChange(column);
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getTabelData2();
      this.onSortChange(column);
    },

    currentChange(e) {
      this.current = e;
      this.getList();
    },
    sizeChange(e) {
      this.size = e;
      this.getList();
    },
    onSortChange(column) {
      this.sortType =
        column.order === "ascending"
          ? 1
          : column.order === "descending"
          ? 0
          : ""; //将sortType设置为与后端约定的排序值，1为升序，0为降序，null为默认不排序
      this.pprop =
        column.prop === "createTime"
          ? "create_time"
          : column.prop === "startTime"
          ? "start_time"
          : column.prop === "endTime"
          ? "end_time"
          : column.prop;
      console.log("column排序____________", column);
      this.getList();
      //sort("order=" + this.sortType + "&prop=" + this.pprop).then((res) => {
      //  let data = JSON.parse(JSON.stringify(res.data));
      //  this.tableData = data.splice((this.page - 1) * this.size, this.size);
      //  this.total = res.data.length;
      //  //this.tableData = res.data;
      //});
    },
  },
  mounted() {
    this.getList();
    //this.getTabelData2();
  },
};
</script>
    
<style scoped lang="less">
.el-form {
  padding: 0 10px;
}

.el-date-editor {
  width: 100% !important;
}
</style>
    